<template>
	<view class="center">
		<view class="bg center">
			<view class="bg-radius"></view>
			<navigator class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''"
				url="/pages/myInformation/myInformation">
				<image class="logo-img" :src="login ? uerInfo.avatarUrl :avatarUrl"></image>
				<view class="logo-title">
					<text class="uer-name">Lisa</text>
				</view>
			</navigator>
		</view>
		<view class="bg-gray center">
			<view class="center-nav">
				<navigator class="center-nav-title" url="/pages/myOrder/myOrder">
					<text>我的订单</text>
					<uni-icons type="right" size="20"></uni-icons>
				</navigator>
				<view class="center-nav-content">
					<view class="center-nav-item" v-for="(nav,index) in navs" @click="toNav(index)">
						<text class="center-nav-item-icon"> {{ nav.icon }} </text>
						<text class="center-nav-item-text">{{nav.text}}</text>
					</view>
				</view>
			</view>
			<view class="center-nav">
				<view class="center-nav-title">
					<text>我的服务</text>
				</view>
				<uni-grid :column="4" :showBorder="false" @change="toPage">
					<uni-grid-item v-for="(item, index) in serveList" :index="index" :key="index">
						<view class="grid-item-box" style="background-color: #fff;">
							<image :src="item.imgUrl" style="width: 50rpx;height:50rpx;"></image>
							<text class="text">{{item.text}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
				<zw-tabbar :defaultSel="0" @clickTab="clickTab" :bigIdx="1"></zw-tabbar>
			</view>
			<text class="logout">退出登录</text>
		</view>
		<navigator class="message" url="/pages/my/message/message">
			消息中心
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: false,
				avatarUrl: "../../static/girl.jpg",
				uerInfo: {},
				navs: [{
						icon: "\u{e602}",
						text: '待付款',
						url: '/pages/myOrder/myOrder',
						current: 0
					},
					{
						icon: "\u{e601}",
						text: '待使用',
						url: '/pages/myOrder/myOrder',
						current: 2
					},
					{
						icon: "\u{e604}",
						text: '待评价',
						url: '/pages/myOrder/myOrder',
						current: 3
					},
					{
						icon: '\u{e60a}',
						text: '优惠券',
						url: '/pages/my/myCoupo/myCoupo',
						current: 1
					}
				],
				serveList: [{
					imgUrl: '../../static/coupon.png',
					text: '领券中心',
					url: '/pages/my/coupoCnentre/coupoCnentre'
				}, {
					imgUrl: '../../static/invite.png',
					text: '邀请好友'
				}, {
					imgUrl: '../../static/myCar.png',
					text: '我的车辆',
					url: '/pages/my/myCar/myCar'
				}, {
					imgUrl: '../../static/consume.png',
					text: '消费记录',
					url: '/pages/my/myExpenseRecord/myExpenseRecord'
				}, {
					imgUrl: '../../static/maintenance.png',
					text: '我的维修',
					url: '/pages/my/myMaintain/myMaintain'
				}, {
					imgUrl: '../../static/feedback.png',
					text: '意见反馈',
					url: '/pages/my/Feedback/Feedback'
				}, {
					imgUrl: '../../static/address.png',
					text: '收货地址',
				}],
			}
		},
		methods: {
			toPage(e) {
				uni.navigateTo({
					url: this.serveList[e.detail.index].url
				})

			},
			clickTab(idx) {
				this.tabBarIdx = idx;
			},
			toNav(index) {
				uni.navigateTo({
					url: this.navs[index].url + '?current=' + this.navs[index].current
				})
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4218190_6debofuo8gh.ttf?t=1701960489041') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #5290FF;
	}

	.center {
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	$head-color: #fff;
	$white-color: #fff;
	$main-color: #333;
	$radius: 0rpx;
	$border-color: #efefef;
	$color-1: #007aff;
	$color-2: #4cd964;
	$color-3: #f0ad4e;
	$color-4: #dd524d;
	$list-item-height: 100rpx;
	$list-margin: 20rpx;
	$width: calc(100vw - 0rpx);
	$head-height: 550rpx;
	$head-width: 120vw;
	$margin-left: -60vw;

	.bg {
		width: 100vw;
		height: 285rpx;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;

		.bg-radius {
			background-color: $head-color;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			width: $head-width;
			height: $head-height;
			box-sizing: border-box;
			position: absolute;
			left: 50%;
			margin-left: $margin-left;
			top: 150rpx;
			z-index: 8;
		}

		.logo {
			background-color: transparent;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			width: 100vw;
			box-sizing: border-box;
			flex-direction: column;
			align-items: center;
			position: absolute;
			left: calc(50vw - 90rpx);
			top: 70rpx;
			z-index: 9;

			.logo-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: solid 10rpx #efefef;
			}

			.logo-title {
				height: 150rpx;
				flex: 1;
				align-items: center;
				justify-content: space-between;
				flex-direction: row;

				.uer-name {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 34rpx;
					color: #333;
				}
			}
		}
	}

	.center-list {
		background-color: #FFFFFF;
		margin: 0 auto $list-margin;
		width: $width;
		flex-direction: column;
		border-radius: $radius;

		.center-list-item {
			height: $list-item-height;
			width: 100%;
			box-sizing: border-box;
			flex-direction: row;
			padding: 0rpx 20rpx;

			.list-icon {
				width: 40rpx;
				height: $list-item-height;
				line-height: $list-item-height;
				font-size: 45rpx;
				color: #4cd964;
				text-align: center;
				font-family: texticons;
				margin-right: 20rpx;
			}

		}

	}


	.center-nav {
		background-color: #FFFFFF;
		padding-top: 1rpx;
		margin: 0rpx auto $list-margin;
		width: $width;
		flex-direction: column;
		border-radius: $radius;

		.center-nav-title {
			padding: 25rpx 30rpx;
			font-size: 34rpx;
			color: #333;
			font-weight: 400;
			border-bottom: solid 1rpx $border-color;
		}

		.center-nav-content {
			height: 180rpx;
			display: flex;
			align-items: center;

			.center-nav-item {
				flex-direction: column;
				flex: 1;
				text-align: center;

				.center-nav-item-icon {
					color: #333;
					font-size: 48rpx;
					font-weight: 500;
					font-family: texticons;
				}
			}
		}
	}

	.bg-gray {
		background: #f4f4f4;
		height: calc(100vh - 280rpx);
	}
</style>
<style lang="scss">
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
	.logout {
		margin-top: 70rpx;
		width: 100%;
		text-align: center;
		color: #5290FF;
		font-size: 30rpx;
	}

	.uni-icons {
		margin-left: 500rpx;
	}

	.message {
		font-size: 30rpx;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}
</style>